<template>
  <view class="container">
    <view class="search">
      <view class="city" @click="onCity">
        <text>{{ cityName }}</text>
      </view>
      <view class="section" @tap="onSearch">
        <image class="search-img" src="@/static/images/search.png" />
        <text class="placeholder">搜索</text>
      </view>
    </view>

    <view class="content">
      <swiper
        class="pic-swiper"
        autoplay="true"
        :interval="interval"
        duration="2000"
        indicator-color="#ddd"
        indicator-active-color="#e02e2e"
        :circular="true"
        indicator-dots
        previous-margin="20rpx"
        next-margin="20rpx"
      >
        <block v-for="(item, index) in bannerList" :key="index">
          <swiper-item class="banner-item">
            <view class="img-box">
              <image class="banner" :src="item.imgUrl" :data-prodid="item.relation" @tap="onProductInfo" mode="center" />
            </view>
          </swiper-item>
        </block>
      </swiper>

      <!-- 消息播放 -->
      <view class="message" v-if="noticeList && noticeList.length" @tap="onNotice">
        <image class="notice" src="@/static/images/notice.png" />
        <swiper class="swiper-cont" :vertical="true" :autoplay="true" :circular="true" duration="1000">
          <block v-for="(item, index) in noticeList" :key="index">
            <swiper-item class="items">{{ item.title }}</swiper-item>
          </block>
        </swiper>
        <text class="arrow" />
      </view>

      <view class="menu-item">
        <view class="item" data-sts="1" data-title="新品推荐" @tap="onProductList">
          <image src="@/static/images/new_product.png" />
          <text>新品推荐</text>
        </view>
        <view class="item" data-sts="9" data-title="本地生活" @tap="onProductList">
          <image src="@/static/images/local_life.png" />
          <text>本地生活</text>
        </view>
        <view class="item" data-sts="3" data-title="每日疯抢" @tap="onProductList">
          <image src="@/static/images/everyday_crazy.png" />
          <text>每日疯抢</text>
        </view>
        <!-- <view class="item" data-sts="2" data-title="限时特惠" @tap="onProductList">
          <image src="@/static/images/time_limit.png" />
          <text>限时特惠</text>
        </view> -->
        <!-- <view class="item" @tap="toCouponCenter">
          <image src="@/static/images/coupon.png" />
          <text>领优惠券</text>
        </view> -->
      </view>
    </view>

    <view class="goods" v-if="updata">
      <block v-for="(item, index) in tagList" :key="index">
        <!-- 每行3列 -->
        <!-- <view class="column3" v-if="item.style === '2' && item.prods && item.prods.length">
          <view class="titleBar">
            <text class="titles">{{ item.title }}</text>
            <view class="more" data-sts="0" :data-id="item.id" :data-title="item.title" @tap="onProductList">
              <text class="text">更多</text>
            </view>
          </view>

          <view class="content">
            <block v-for="(prod, index2) in item.prods" :key="index2">
              <view class="prodItem" :data-prodid="prod.prodId" @tap="onProductInfo">
                <view class="image">
                  <img-show :src="prod.pic" :class-list="['prodimg']" />
                </view>
                <view class="goodsName">{{ prod.prodName }}</view>
                <view class="describe">{{ prod.brief ? prod.brief : '--' }}</view>
                <view class="price">
                  <text class="symbol">￥</text>
                  <text class="big-num">{{ wxs.parsePrice(prod.price)[0] }}</text>
                  <text class="small-num">.{{ wxs.parsePrice(prod.price)[1] }}</text>
                </view>
              </view>
            </block>
          </view>
        </view> -->

        <!-- 每行2列  && item.prods && item.prods.length -->
        <view class="column2" v-if="item.style === '1'">
          <view class="titleBar">
            <text class="titles">{{ item.title }}</text>
            <view class="more" v-if="item.prods && item.prods.length" data-sts="0" :data-id="item.id" :data-title="item.title" @tap="onProductList">
              <text class="text">更多</text>
              <text class="arrow" />
            </view>
          </view>

          <view class="list" v-if="item.prods && item.prods.length">
            <block v-for="(prod, index2) in item.prods" :key="index2">
              <view class="productItem" :data-prodid="prod.prodId" @tap="onProductInfo">
                <view class="icon">
                  <img-show :src="prod.pic" class="pic" />
                </view>
                <view class="content">
                  <view class="goodsName">{{ prod.prodName }}</view>
                  <view class="describe">{{ prod.brief ? prod.brief : '--' }}</view>
                  <view class="textInfo">
                    <view class="price">
                      <text class="symbol">￥</text>
                      <text class="big-num">{{ wxs.parsePrice(prod.price)[0] }}</text>
                      <text class="small-num">.{{ wxs.parsePrice(prod.price)[1] }}</text>
                    </view>
                    <!-- <image class="basket-img" src="@/static/images/tabbar/basket_foc.png" /> -->
                  </view>
                </view>
              </view>
            </block>
          </view>

          <view v-else class="empty">暂无数据</view>
        </view>

        <!-- 每行1列  && item.prods && item.prods.length-->
        <view class="column1" v-if="item.style === '0'">
          <!-- <view class="titles">{{ item.title }}</view> -->
          <view class="titleBar">
            <text class="titles">{{ item.title }}</text>
            <view class="more" v-if="item.prods && item.prods.length" data-sts="0" :data-id="item.id" :data-title="item.title" @tap="onProductList">
              <text class="text">更多</text>
              <text class="arrow" />
            </view>
          </view>

          <block v-for="(prod, index2) in item.prods" :key="index2" v-if="item.prods && item.prods.length">
            <view class="productItem" :data-prodid="prod.prodId" @tap="onProductInfo">
              <view class="icon">
                <img-show class="pic" :src="prod.pic" />
              </view>
              <view class="content">
                <view class="goodsName">{{ prod.prodName }}</view>
                <view class="describe">{{ prod.brief ? prod.brief : '--' }}</view>
                <view class="textInfo">
                  <view class="price">
                    <text class="symbol">￥</text>
                    <text class="big-num">{{ wxs.parsePrice(prod.price)[0] }}</text>
                    <text class="small-num">.{{ wxs.parsePrice(prod.price)[1] }}</text>
                  </view>
                  <!-- <image class="basket-img" src="@/static/images/tabbar/basket_foc.png" @tap.stop="addToCart(prod)" /> -->
                </view>
              </view>
            </view>
          </block>
          <view v-else class="empty">暂无数据</view>
        </view>
      </block>
    </view>
  </view>
</template>

<script setup>
const wxs = number();
const openIdRef = ref('');
const cityName = ref('深圳市');
const interval = ref(5000); //banner切换时间
const bannerList = ref([]);
const noticeList = ref([]);
const tagList = ref([]);
const updata = ref(true);

onLoad(() => {
  openIdRef.value = uni.getStorageSync('openId');
  // if (!openIdRef.value) {
  //   uni.login({
  //     provider: 'weixin',
  //     success: (res) => {
  //       console.log('获取openId: ', res); // {errMsg: "login:ok", code: "0d3k15100snN0T1d8y100hSPwO1k151i"}
  //       uni.setStorageSync('openId', res.code);
  //     }
  //   });
  // }
  getAllData();
});

onShow(() => {
  getCityStorage();
  // #ifdef MP-WEIXIN
  uni.getSetting({
    success(res) {
      if (!res.authSetting['scope.userInfo']) {
        uni.navigateTo({
          url: '/pages/login/login'
        });
      }
    }
  });
  // #endif
  http.getCartCount(); // 重新计算购物车总数量
});

onPullDownRefresh(() => {
  getAllData();
});

const getCityStorage = () => {
  let city = uni.getStorageSync('CityName', '深圳市');
  if (cityName.value != city) {
    if (city) cityName.value = city;
    getTag();
  }
};

const getAllData = () => {
  http.getCartCount(); // 重新计算购物车总数量
  getBannerList();
  getNoticeList();
  getTag();
};

const onProductInfo = (e) => {
  const productId = e.currentTarget.dataset.prodid;

  if (productId) {
    uni.navigateTo({
      url: '/pages/index/productInfo/productInfo?productId=' + productId
    });
  }
};

//加入购物车
const addToCart = (item) => {
  uni.showLoading({
    mask: true,
    icon: 'none'
  });
  http
    .request({
      url: '/prod/prodInfo',
      method: 'GET',
      data: {
        prodId: item.prodId
      }
    })
    .then(({ data }) => {
      http
        .request({
          url: '/p/shopCart/changeItem',
          method: 'POST',
          data: {
            basketId: 0,
            count: 1,
            prodId: data.prodId,
            shopId: data.shopId,
            skuId: data.skuList[0].skuId
          }
        })
        .then(() => {
          http.getCartCount(); // 重新计算购物车总数量
          uni.showToast({
            title: '已加入购物车',
            icon: 'none'
          });
        })
        .finally(() => {
          uni.hideLoading();
        });
    });
};

const toCouponCenter = () => {
  uni.showToast({
    title: '优惠券',
    icon: 'none'
  });
};

const onCity = () => {
  uni.navigateTo({
    url: '/pages/index/city/city'
  });
};

//搜索
const onSearch = () => {
  uni.navigateTo({
    url: '/pages/index/search/search'
  });
};

//商品列表
const onProductList = (e) => {
  const title = e.currentTarget.dataset.title;
  let url = '/pages/index/productList/productList?sts=' + e.currentTarget.dataset.sts + '&title=' + title;
  const id = e.currentTarget.dataset.id;
  console.log('传参标题：', title, id, e);
  if (id) {
    url += '&tagid=' + id;
  }

  uni.navigateTo({
    url
  });
};

//公告列表
const onNotice = () => {
  uni.navigateTo({
    url: '/pages/index/noticeList/noticeList'
  });
};

//banner
const getBannerList = () => {
  http
    .request({
      url: '/indexImgs',
      method: 'GET',
      data: {}
    })
    .then(({ data }) => {
      bannerList.value = data;
    });
};

// 公告
const getNoticeList = () => {
  http
    .request({
      url: '/shop/notice/topNoticeList',
      method: 'GET',
      data: {}
    })
    .then(({ data }) => {
      noticeList.value = data;
    });
};

//分组列表
const getTag = () => {
  http
    .request({
      url: '/prod/tag/prodTagList',
      method: 'GET',
      data: {}
    })
    .then(({ data }) => {
      tagList.value = data;
      for (let i = 0; i < data.length; i++) {
        updata.value = false;
        updata.value = true;
        getTagProduct(data[i].id, i);
      }
    })
    .catch((err) => {
      uni.stopPullDownRefresh();
    });
};

const getTagProduct = (id, index) => {
  http
    .request({
      url: '/prod/prodListByTagId',
      method: 'GET',
      data: {
        tagId: id,
        size: 6,
        city: cityName.value
      }
    })
    .then(({ data }) => {
      updata.value = false;
      updata.value = true;
      const taglistParam = tagList.value;
      taglistParam[index].prods = data.records;
      tagList.value = taglistParam;
    })
    .finally(() => {
      uni.stopPullDownRefresh();
    });
};
</script>

<style lang="scss" scoped>
// @use './index.scss';
@import './index.scss';
</style>
